<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: YuanYu
 * @LastEditTime: 2021-10-19 18:56:31
-->
<template>
  <!-- 这里使用ref 作用类似于id -->
  <!-- 2.定义容器 -->
  <div ref="root" style="height:150px"></div>
</template>

<script>
// 在g2plot中 引入Column组件
import {Column} from '@antv/g2plot'
import {ref, onMounted, onUnmounted} from 'vue'
// 使用vue3.0的语法
// 1.引入g2plot 已经在package.json中进行引用

export default({
  setup() {
    // 3.创建g2plot实例
    let root = ref(null);
    let column = null;
    // 定义初始化视图函数
    let initChart = () => {
      column = new Column(root.value,{
        data:[
          { year: '南宁市', value: 6 },
          { year: '柳州市', value: 5 },
          { year: '桂林市', value: 4.5 },
          { year: '钦州市', value: 7 },
          { year: '贵港市', value: 6.3 },
          { year: '玉林市', value: 5 },
        ],
        xField: 'year',
        yField: 'value',
        // 配置别名
        meta: {
          value: {
            alias: "人数/百",
          },
        },
      })
      column.render()
    }
    // 4.渲染
    // 在created之后执行，
    onMounted(initChart)
    // 当页面切换或跳转时，可能会每次切换加载都会新建一个图表，所以在这可以做限制
    onUnmounted(() => {
      if (plot != null) {
        plot.destroy();
      }
    });
    return{
      root
    }
  },
})
</script>


<style scoped>

</style>